<script lang='ts' setup name='Watch4'>
import { ref, reactive, watch } from 'vue'

const goods = reactive({
  name:'罗技鼠标',
  price:80.05
})


const course = reactive({
    name:'计算机组成原理',
    teacher:'王老师',
    room:'2612'
})








function changeGoodsName(){
  goods.name += '~'
}
function changeGoodsPrice(){
  goods.price += 10;
}


function changeCourseRoom(){
    course.room = "2533"
}



// watch(想要监听的对象，一旦数据发生变化 时候回调的函数)

// watch(()=>goods.price,(newVal,oldVal)=>{
//   console.log("goods数据发生变化",newVal,oldVal);
  
// })
// watch(()=>course.room,(newVal,oldVal)=>{
//   console.log("room 数据发生变化",newVal,oldVal);
  
// })

// [()=>person.name,person.car]/


// watch(  [()=>goods.price,()=>course.room]  ,(newVal)=>{

//   const price = newVal[0];
//   const root = newVal[1];

//   console.log("监听的数据发生变化了 数据发生变化",newVal);
  
// })


//对象结构
const user = {name:'jshand',age:18};
// const name = user.name
// const age = user.age

const {name,age}= user

//数组结构

const arr = ["first",'secode'];
// const a1 = arr[0]
// const a2 = arr[1]
const [a1,a2] = arr;


watch(  [()=>goods.price,()=>course.room]  ,([price,room])=>{
  console.log("监听的数据发生变化了 数据发生变化",price,room);
})


</script>

<template>

  <div class="person">
    <h1>情况四：监视【ref、reactive】定义的【对象类型】数据的某一个属性</h1>
    <ul>
      <li>商品名称:{{ goods.name }}</li>
      <li>商品价格:{{ goods.price }}</li>
    </ul>
    <h3>选课信息{{ course.name +' :  '+course.teacher +' :  '+course.room }}</h3>

    <button @click="changeGoodsName">修改商品名称</button>
    <button @click="changeGoodsPrice">修改商品价格</button>
    <button @click="changeCourseRoom">修改教室</button>



  </div>

</template>

<style scoped>
 ul>li{
    margin: 10px ;
  }

  button{
    margin: 5px;
  }

</style>
